<template>
<div>
  <div class="content">
    <div class="title">拣货单</div>
    <table class="gridtable">
      <tr>
        <th>一级分类</th><th>二级分类</th><th>拣货列表</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{item.parent.name}}</td>
        <td>{{item.name}}</td>
        <td>
          <div v-for="subitem in item.items" :key="subitem.id" class="item-line" v-if="subitem.zone">
            【{{subitem.product_name}}】  {{subitem.name}}  数量：{{subitem.quantity}} 库位：{{ subitem.zone + subitem.shelf + '-' + subitem.floor + '-' + subitem.number }}
          </div>
          <div v-for="subitem in item.items" :key="subitem.id" class="item-line" v-if="!subitem.zone">
            【{{subitem.product_name}}】  {{subitem.name}}  数量：{{subitem.quantity}}
          </div>
        </td>
      </tr>
    </table>
  </div>

  <div class="btn">
    <el-button type="primary" @click="print">打印</el-button>
  </div>

</div>

</template>

<script>
import { getList } from '@/api/picking-order'

export default {
  data() {
    return {
      dto: null,
      list: null,
      listLoading: false,
      date_value:[
        '2020-08-29',
        '2020-08-31'
      ]
    }
  },
  created() {
    let from_date = this.$route.query.from_date
    let to_date = this.$route.query.to_date
    let states = this.$route.query.states
    this.getList(from_date,to_date,states)
  },
  methods: {
    getList(from_date,to_date,s) {
      let states = s.split(',')
      this.listLoading = true
      getList({
        from_date:from_date,
        to_date:to_date
      },states).then(response => {
        this.list = response.categories
        this.listLoading = false
      }).catch(error => {
        this.list = []
        this.listLoading = false
        Promise.reject(error)
      })
    },
    print(){
      window.print()
    }
  }
}
</script>

<style>
  @media print {
    @page {
      margin: 0cm;
    }
    body {
      margin: 0cm;
    }
    .btn{
      visibility: hidden;
      display: none;
    }
  }

  .btn{
    margin-top:20px;
    width: 694px;
    margin-left:30px;
    display: flex;
    justify-content: center;
  }

  .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 694px;
    margin-left:30px;
    font-size:20px !important;
    font-family: SimHei;
    color:#000000;
  }

  .content .title{
    display: flex;
    justify-content: center;
    padding-top:20px;
    padding-bottom:20px;
  }

  .content .params{
    font-size:14px;
    display: flex;
    justify-content: space-between;
    margin-bottom:10px;
  }

  .item-line{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border:1px solid white;
    margin-bottom:5px;
  }

  table.gridtable {
    font-size:11px;
    color:#000000;
    border-width: 1px;
    border-color: #000000;
    border-collapse: collapse;
  }
  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #000000;
    background-color: #dedede;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #000000;
    background-color: #ffffff;
  }

  .name_item{
    margin-right:10px;
  }

</style>
